<!DOCTYPE html>
<html>
<head>
	
	<title>Light life Admin Panel | Typography</title>
	<meta name="description" content="">
    <meta name="author" content="vladproduction.ru">
    <link rel="shortcut icon" href="images/favicon.ico" />

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cuprum" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/fancybox.css" media="screen"  />
    <link rel="stylesheet" href="./css/jquery-ui-1.8.16.custom.css" media="screen"  />
    <link rel="stylesheet" href="./css/fullcalendar.css" media="screen"  />
    <link rel="stylesheet" href="./lib/elfinder/css/elfinder.css" media="screen" />
    <link rel="stylesheet" href="./lib/editor/jquery.wysiwyg.css" media="screen" />
    <link rel="stylesheet" href="./lib/editor/default.css" media="screen" />
    <link rel="stylesheet" href="./lib/player/css/style.css">
    <link rel="stylesheet" href="./css/tipTip.css" media="screen" />
    <link rel="stylesheet" href="./css/chosen.css" media="screen"  />
    <link rel="stylesheet" href="./css/colorpicker.css" type="text/css" />
    <link rel="stylesheet" href="./css/tables.css" media="screen"  />
    <link rel="stylesheet" href="./css/jquery.jgrowl.css" media="screen"  />
    
    <!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="./lib/jquery-ui-1.8.16.custom.min.js"></script>
    
    <script type="text/javascript" src="./lib/ddaccordion.js"></script>
	<script type="text/javascript" src="./lib/jquery.flot.min.js"></script>
    <script type="text/javascript" src="./lib/jquery.flot.pie.js"></script>
    <script type="text/javascript" src="./lib/jquery.flot.orderBars.js"></script>
    <script type="text/javascript" src="./lib/fancybox/fancybox.js"></script>
    <script type="text/javascript" src="./lib/fullcalendar.min.js"></script>
    <script src="./lib/elfinder/js/elfinder.min.js" charset="utf-8"></script>
    <script src="./lib/editor/jquery.wysiwyg.js" charset="utf-8"></script>
    <script src="./lib/editor/wysiwyg.image.js" charset="utf-8"></script>
	<script src="./lib/editor/default.js" charset="utf-8"></script>
    <script src="./lib/editor/wysiwyg.link.js" charset="utf-8"></script>
    <script src="./lib/editor/wysiwyg.table.js" charset="utf-8"></script>
    <script type="text/javascript" src="./lib/player/jquery-jplayer/jquery.jplayer.js"></script>
    <script type="text/javascript" src="./lib/player/ttw-video-player-min.js"></script>
    <script src="./lib/jquery.tipTip.minified.js"></script>
    <script src="./lib/forms.js"></script>
    <script src="./lib/chosen.jquery.min.js"></script>
    <script src="./lib/autoresize.jquery.min.js"></script>
    <script type="text/javascript" src="./lib/colorpicker.js"></script>
	<script type="text/javascript" src="./lib/validation.js"></script>
    <script src="./lib/jquery.dataTables.min.js"></script>
    <script src="./lib/jquery.jgrowl_minimized.js"></script>
    <script src="./lib/slidernav-min.js"></script>
    <script src="./lib/formToWizard.js"></script><script>$(document).ready(function(){ $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' }) });</script>
    
    
    <script type="text/javascript" src="./lib/functions.js"></script>
<meta charset="UTF-8"></head>

<body>
<section id="main-content">
 <header>
	  <div class="centered">
      
	  <h1><a href="./dashboard.html" class="logo">Light life Admin Panel</a></h1>
 
 	  <ul class="menu-head">
      	   <li><a href="#"><span id="visit-icon">Visit site</span></a></li>
      	   <li><a href="#"><span id="news-icon">News</span></a></li>
           <li><a href="#"><span id="statistics-icon">Statistics</span></a></li>
           <li><a href="#"><span id="users-icon">Users</span></a></li>
      </ul>
            
      <nav>
        <ul>
            <li id="login">
                <a id="login-trigger" href="#">
 					<span id="user-panel-check"></span>
  					<span id="user-panel-title">Welcome, <strong>John Doe</strong></span>
                    <span id="user-panel"></span>
                </a>
                <div id="login-content">
                  <ul>
                  <li><a href="#"><span>Settings</span> <img src="./images/setting.png" alt=""></a></li>
                  <li><a href="#"><span>Help</span> <img src="./images/help.png" alt=""></a></li>
                  <li><a href="./index.html"><span>Log Out</span> <img src="./images/logout.png" alt=""></a></li>
                  </ul>
               </div>                     
            </li> 
        </ul>
      </nav>     
       </div>
 </header>
 
  <section id="content">
  <div class="centered">  

  
  <div class="main">
          
        <div class="speedbar">
         <a href="#">Light life Admin Panel</a> &rsaquo; <a href="#">Typography</a>
        </div>
        
  	   <!--Reports-->
       <ul class="reports">
           <li><a href="#" class="report"><span class="add"></span>New news</a></li>    
           <li><a href="#" class="report"><span class="add"></span>New post</a></li> 
           <li><a href="#" class="report"><span class="add"></span>New users</a></li> 
           <li><a href="#" class="report last-report"><span class="add"></span>New messages</a></li> 
        </ul>
        
        <!--Reports end-->
        
        <!--Statistic-->
        <div class="grid-1">
           <div class="title-grid">Typography</div>
           <div class="content-gird typography-heading">
            <h1>Heading 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
            
            <h2>Heading 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
            
            <h3>Heading 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            
            <h4>Heading 4</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            
            <h5>Heading 5</h5>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

            <hr>
            
             <div class="typography-ul">
             <h3>Lists</h3>
             <ul class="normal-list"> 
                 <li>List item one</li> 
                 <li>List item two</li> 
                 <li>List item three</li> 
                 <li>List item four</li> 
             </ul>  
             
             <ul class="square-list"> 
                 <li>List item one</li> 
                 <li>List item two</li> 
                 <li>List item three</li> 
                 <li>List item four</li> 
             </ul>
             
<!--             <ul class="lower-latin-list"> 
                 <li>List item one</li> 
                 <li>List item two</li> 
                 <li>List item three</li> 
                 <li>List item four</li> 
             </ul>-->
             
             <ul class="number-list"> 
                 <li>List item one</li> 
                 <li>List item two</li> 
                 <li>List item three</li> 
                 <li>List item four</li> 
             </ul>
             
             <ul class="circle-list"> 
                 <li>List item one</li> 
                 <li>List item two</li> 
                 <li>List item three</li> 
                 <li>List item four</li> 
             </ul>
             
             <ul class="none-list"> 
                 <li>List item one</li> 
                 <li>List item two</li> 
                 <li>List item three</li> 
                 <li>List item four</li> 
             </ul>
             
             <ul class="del-list"> 
                 <li>List item one</li> 
                 <li>List item two</li> 
                 <li>List item three</li> 
                 <li>List item four</li> 
             </ul>
             
             <ul class="triangle-list"> 
                 <li>List item one</li> 
                 <li>List item two</li> 
                 <li>List item three</li> 
                 <li>List item four</li> 
             </ul>
             
             <ul class="check-list"> 
                 <li>List item one</li> 
                 <li>List item two</li> 
                 <li>List item three</li> 
                 <li>List item four</li> 
             </ul>
             
             <ul class="arrow-list"> 
                 <li>List item one</li> 
                 <li>List item two</li> 
                 <li>List item three</li> 
                 <li>List item four</li> 
             </ul>
             
             <ul class="plus-list"> 
                 <li>List item one</li> 
                 <li>List item two</li> 
                 <li>List item three</li> 
                 <li>List item four</li> 
             </ul>
             
            </div>
             <hr>
            <h3>Paragraphs</h3>  
            	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
                
                <p class="italic">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
                
                <p class="intro">
                 <span class="firstletter-blue">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                </p>  
                
                <p class="intro-2">
                 <span class="firstletter-orange">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                </p>  
                
                <p class="intro-2">
                 <span class="firstletter-green">D</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                </p>  
                
                <div class="clear"></div>
                
                <h3>Blockuote and pre</h3>
                
                  <blockquote> <p>Donec posuere, enim eu dignissim elementum, magna dui vulputate mauris, sodales commodo ligula quam at augue. Sed nisl nulla, luctus ut vulputate et, feugiat ut eros. Sed id felis quis sapien condimentum sodales in at quam. Maecenas fermentum metus nec purus fringilla malesuada bibendum in erat. In hac habitasse platea dictumst. Duis magna justo, lobo. Maecenas fermentum metus nec purus fringilla malesuada bibendum in erat. In hac habitasse platea dictumst.</p> </blockquote>  
                  
                  <pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut...<br>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex...</pre>   
           </div>
        </div>  
		<!--Statistic end-->

        
   </div><!-- END MAIN-->
  
   <!-- SIDEBAR -->
   <div class="sidebar">
   
   
   <div id="search">
          <form action="#">
         	 <input type="text" placeholder="Search" value="">
             <div class="submit">
				<input type="image" src="./images/px.gif" title="Search" alt="Search" />
			 </div>
          </form>
   </div>
   
   <ul class="menu">
		<li class="expand">
			<a href="#"><span class="four-prong icon">General</span><span class="num">5</span></a>
			<ul class="acitem">
				<li><a href="./dashboard.html"><span class="dashboard icon">Dashboard</span></a></li>
				<li><a href="./charts.html"><span class="charts icon">Charts</span></a></li>
                <li><a href="./gallery.html"><span class="gallery-pic icon">Image Gallery</span></a></li>
                <li><a href="./calendar.html"><span class="cal icon">Calendar</span></a></li>
                <li><a href="./messages.html"><span class="conversations icon">Page Messages</span></a></li>
			</ul>
		</li>
		<li>
			<a href="#"><span class="four-prong icon">Styling</span><span class="num">5</span></a>
			<ul class="acitem">
            	<li><a href="./forms.html"><span class="forms icon">Form Styling</span></a></li>
       			<li><a href="./table.html"><span class="tables icon">Table Styling</span></a></li>
                <li><a href="./grid.html"><span class="grids icon">Grid Styling</span></a></li>
            	<li><a href="./buttons.html"><span class="buttons-icons icon">Buttons & Icons</span></a></li>
				<li><a href="./typo.html"><span class="typo icon">Typo</span></a></li>	
			</ul>
		</li>
		<li>
			<a href="#"><span class="four-prong icon">Plugins</span><span class="num">6</span></a>
			<ul class="acitem">
                <li><a href="./widgets.html"><span class="invoice icon">Widgets</span></a></li>
                <li><a href="./plaeyr.html"><span class="youtube icon">HTML5 Player</span></a></li>
                <li><a href="./editor.html"><span class="w-editor icon">WYSIWYG Editor</span></a></li>	
       		    <li><a href="./file.html"><span class="files icon">File Manager</span></a></li>
                <li><a href="./step.html"><span class="steps icon">Step By Step Wizard</span></a></li>
                <li><a href="./contact.html"><span class="connection icon">Contact List</span></a></li>
			</ul>
		</li>
		<li>
			<a href="#"><span class="four-prong icon">Errore Page</span><span class="num">3</span></a>
			<ul class="acitem">
                <li><a href="./404.html"><span class="errors icon">Error 404</span></a></li>
                <li><a href="./500.html"><span class="errors icon">Error 500</span></a></li>
                <li><a href="./503.html"><span class="errors icon">Error 503</span></a></li>
			</ul>
		</li>
	</ul>	
    
	</div>
 	<!-- SIDEBAR -->

    
  
    </div>
  </section>


<div class="empty"></div>
</section>   <!--end main-content-->     

 <footer>
      <div class="info-footer">
        	<div id="left">
            <ul id="menu-footer">
            	<li><a href="#">Feedback</a></li>
                <li><a href="#">Support</a></li>
            </ul>
            <p>Copyright В© 2011-2012  Light Life.</p>
            <p>Follow <a href="http://themeforest.net/user/dimka_ua_kh">@dimka_ua_kh</a></p> 

	  </div>
            <div id="right">
            	<h1><a href="./dashboard.html" class="logo">Light life Admin Panel</a></h1>
            </div>
      </div>
 </footer>

</body>
</html>